<template>
  <div class="mod-theme">
    <div class="mod-theme-icon">
      <a href="javascript:;" title="换肤" @click="clickShow">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-caisepifu"></use>
        </svg>
      </a>
    </div>
    <div class="mod-theme-main" v-if="showTheme">
      <div class="theme-main-l">
        <ul class="theme-list clearfix">
          <li
            :class="[
              'theme-item',
              { 'theme-item-current': index == themeIndex },
            ]"
            v-for="(item, index) in themes"
            :key="index"
            @click="clickTheme(index)"
          >
            <a href="javascript:;" :title="item.key">{{ item.key }}</a>
          </li>
          <li class="theme-item" v-if="themeIndex == themes.length - 1">
            <input
              class="new-skin"
              type="text"
              v-model="newSkinName"
              placeholder="皮肤名称"
            />
          </li>
        </ul>
      </div>
      <div class="theme-main-r" v-if="themes[themeIndex]">
        <ul class="clearfix">
          <li class="theme-color">
            <p>主题色：</p>
            <el-color-picker
              class="theme-color-box"
              v-model="themes[themeIndex].colorTheme"
              :disabled="
                themes[themeIndex].id == 0 || themes[themeIndex].id == 1
              "
            ></el-color-picker>
          </li>
          <li class="theme-color">
            <p>背景色浅：</p>
            <el-color-picker
              class="theme-color-box"
              v-model="themes[themeIndex].colorThemeLight5"
              :disabled="
                themes[themeIndex].id == 0 || themes[themeIndex].id == 1
              "
            ></el-color-picker>
          </li>
          <li class="theme-color">
            <p>背景色浅1：</p>
            <el-color-picker
              class="theme-color-box"
              v-model="themes[themeIndex].colorThemeLight4"
              :disabled="
                themes[themeIndex].id == 0 || themes[themeIndex].id == 1
              "
            ></el-color-picker>
          </li>
          <li class="theme-color">
            <p>背景色深：</p>
            <el-color-picker
              class="theme-color-box"
              v-model="themes[themeIndex].colorThemeLight"
              :disabled="
                themes[themeIndex].id == 0 || themes[themeIndex].id == 1
              "
            ></el-color-picker>
          </li>
          <li class="theme-color">
            <p>字体颜色：</p>
            <el-color-picker
              class="theme-color-box"
              v-model="themes[themeIndex].colorText"
              :disabled="
                themes[themeIndex].id == 0 || themes[themeIndex].id == 1
              "
            ></el-color-picker>
          </li>
        </ul>
        <div class="theme-btn">
          <el-button size="mini" type="primary" @click="setTheme">
            设置
          </el-button>
          <el-button
            size="mini"
            :disabled="
              themes[themeIndex].id == 0 ||
              themes[themeIndex].id == 1 ||
              themes[themeIndex].id == -1 ||
              themes[themeIndex].id == theme.id
            "
            @click="delTheme"
          >
            删除
          </el-button>
        </div>
      </div>
    </div>
    <small-tip :tipMessage="smallTipMsg" v-if="showSmallTip"></small-tip>
  </div>
</template>

<script>
import SmallTip from "components/tip/SmallTip";

export default {
  components: {
    SmallTip,
  },
  data() {
    return {
      showTheme: false,
      theme: {},
      themeIndex: 0,
      themes: [],
      // 新增皮肤
      newSkin: false,
      newSkinName: "",
      showSmallTip: false,
      smallTipMsg: "操作提示",
    };
  },
  mounted() {
    this.getTheme();
  },
  methods: {
    clickShow() {
      this.showTheme = !this.showTheme;
      this.themes.forEach((item, index) => {
        if (item.id == this.theme.id) {
          this.themeIndex = index;
        }
      });
    },
    setTheme() {
      // console.log(this.themeIndex);
      // console.log(this.themes[this.themeIndex]);
      // 用来标记是否有空值
      let flag = false;
      let ts = localStorage.getItem("themes");
      ts = JSON.parse(ts);
      if (this.themeIndex == this.themes.length - 1) {
        for (let k in this.themes[this.themeIndex]) {
          if (this.themes[this.themeIndex][k] == null) {
            this.smallTipMsg = "颜色不能设置为空";
            this.showSmallTip = true;
            setTimeout(() => {
              this.showSmallTip = false;
            }, 1000);
            flag = true;
          }
        }
        if (!flag) {
          let newTheme = JSON.parse(
            JSON.stringify(this.themes[this.themeIndex])
          );
          newTheme.id = this.themes[this.themeIndex - 1].id + 1;
          if (this.newSkinName == "") {
            newTheme.key = "主题" + newTheme.id;
          } else {
            newTheme.key = this.newSkinName;
            this.newSkinName = "";
          }
          console.log(newTheme);

          ts.splice(this.themeIndex, 0, newTheme);
          // console.log("ts", ts);
          this.themes = ts;
          localStorage.setItem("themes", JSON.stringify(this.themes));
        }
      }
      ts[this.themeIndex] = this.themes[this.themeIndex];
      this.themes = ts;
      localStorage.setItem("themes", JSON.stringify(this.themes));
      localStorage.setItem(
        "theme",
        JSON.stringify(this.themes[this.themeIndex])
      );
      this.theme = this.themes[this.themeIndex];
      this.showTheme = false;
      const body = document.body;
      body.style.setProperty("--color-text", this.theme.colorText);
      body.style.setProperty("--color-theme", this.theme.colorTheme);
      body.style.setProperty("--color-theme-light", this.theme.colorTheme);
      body.style.setProperty(
        "--color-theme-light-4",
        this.theme.colorThemeLight4
      );
      body.style.setProperty(
        "--color-theme-light-5",
        this.theme.colorThemeLight5
      );
    },
    delTheme() {
      this.themes.splice(this.themeIndex, 1);
      localStorage.setItem("themes", JSON.stringify(this.themes));
    },
    getTheme() {
      let ts = localStorage.getItem("themes");
      let t = localStorage.getItem("theme");
      // console.log(ts);
      // console.log(t);
      if (ts) {
        // 有皮肤数据
        this.themes = JSON.parse(ts);
      } else {
        this.themes = [
          {
            key: "默认",
            id: 0,
            colorText: "#000",
            colorTheme: "#409eff",
            colorThemeLight: "#53a8ff",
            colorThemeLight4: "#d9ecff",
            colorThemeLight5: "#ecf5ff",
          },
          {
            key: "绿色",
            id: 1,
            colorText: "#000",
            colorTheme: "#31c27c",
            colorThemeLight: "#67c23a",
            colorThemeLight4: "#e1f3d8",
            colorThemeLight5: "#f0f9eb",
          },
          {
            key: "自定义",
            id: -1,
            colorText: "#000",
            colorTheme: "#409eff",
            colorThemeLight: "#53a8ff",
            colorThemeLight4: "#d9ecff",
            colorThemeLight5: "#ecf5ff",
          },
        ];
        let ts1 = JSON.stringify(this.themes);
        localStorage.setItem("themes", ts1);
      }
      if (t) {
        // 有当前皮肤
        this.theme = JSON.parse(t);
      } else {
        this.theme = {
          key: "默认",
          id: 0,
          colorText: "#000",
          colorTheme: "#409eff",
          colorThemeLight: "#53a8ff",
          colorThemeLight4: "#d9ecff",
          colorThemeLight5: "#ecf5ff",
        };
        let t1 = JSON.stringify(this.theme);
        localStorage.setItem("theme", t1);
      }
      this.themes.forEach((item, index) => {
        if (item.id == this.theme.id) {
          this.themeIndex = index;
        }
      });
    },
    clickTheme(index) {
      // let ts = localStorage.getItem("themes");
      // ts = JSON.parse(ts);
      // this.themes[index] = ts[index];
      this.themeIndex = index;
      if (index == this.themes.length - 1) {
        this.newSkin = true;
      } else {
        this.newSkin = false;
      }
    },
  },
};
</script>

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.mod-theme {
  position: absolute;
  width: 0;
  height: 0;
  border: 30px solid transparent;
  border-top-color: var(--color-theme);
  border-left-color: var(--color-theme);
}
.mod-theme-icon {
  position: absolute;
  top: -20px;
  left: -20px;
  cursor: pointer;
}
.mod-theme-icon .icon {
  font-size: 20px;
}
.mod-theme-main {
  position: relative;
  width: 260px;
  height: 300px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.theme-main-l {
  float: left;
  padding-bottom: 20px;
  width: 100px;
  height: 100%;
  /* border-right: 1px solid var(--color-theme); */
  overflow-x: hidden;
  overflow-y: auto;
}
.theme-main-l::-webkit-scrollbar {
  display: none;
}
.theme-item {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-bottom: 1px solid var(--color-theme);
  cursor: pointer;
}
.theme-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.theme-item-current {
  background-color: var(--color-theme) !important;
}
.theme-item a {
  display: inline-block;
  padding: 0 5px;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.theme-main-r {
  float: left;
  padding-left: 10px;
  width: 160px;
  height: 100%;
  border-left: 2px solid var(--color-theme);
}
.theme-color {
  position: relative;
  height: 50px;
  line-height: 50px;
}
.theme-color p {
  float: left;
  width: 90px;
}
.theme-color-box {
  top: 5px;
}
.theme-btn {
  margin-top: 5px;
}
.new-skin {
  width: 100%;
  text-align: center;
}
</style>